<template>
  <div class="dialog">
    <el-dialog
      title="基金交易"
      width="30%"
      :destroy-on-close="true"
      v-model="showDlg"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="form">
        <el-form
          ref="refForm"
          :model="form"
          label-width="80px"
          style="margin: 10px; width: auto"
        >
          <el-form-item label="账户">
            <!--            <account :account="$props.formData.account_id"></account>-->
            <el-input v-model="form.acc_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="基金">
            <el-input
              v-model="form.fund"
              maxlength="6"
              minlength="6"
            ></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input
              v-model="form.name"
              :disabled="!input_ctl.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="操作">
            <el-select
              v-model="form.operation"
              placeholder="操作方法"
              @change="changeInput"
            >
              <el-option label="申购" value="申购"></el-option>
              <el-option label="赎回" value="赎回"></el-option>
              <el-option label="现金红利" value="现金红利"></el-option>
              <el-option label="分红再投资" value="分红再投资"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.post_date"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="金额">
            <el-input-number
              v-model="form.amount"
              :precision="2"
              :disabled="!input_ctl.money"
              :min="0"
              :controls="false"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="份额">
            <el-input-number
              v-model="form.number"
              :disabled="!input_ctl.number"
              :precision="2"
              :min="0"
              :controls="false"
            ></el-input-number>
          </el-form-item>
          <el-form-item class="text_right">
            <el-button @click="dlgChange(false)">取 消</el-button>
            <el-button type="primary" @click="postData">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from "vue";
import { tradeFund } from "@/apis/report";
import { timestamp2date } from "@/utils/other";

export default {
  name: "AccTrade",
  props: {
    dialog: Object,
    formData: Object
  },
  setup(props, { emit }) {
    let input_ctl = reactive({
      money: true,
      number: true,
      name: props.dialog.name
    });
    const showDlg = ref(props.dialog.show);
    const form = reactive({
      acc_id: props.formData.acc_id,
      fund: props.formData.fund,
      name: props.formData.name,
      operation: props.dialog.onlyBuy ? "申购" : props.formData.operation,
      post_date: Date(),
      amount: 0,
      number: 0
    });
    const dlgChange = refresh => {
      emit("dlgChange", refresh);
    };
    const { proxy } = getCurrentInstance();
    // 改变交易面板的输入状态
    const changeInput = () => {
      input_ctl.money = true;
      input_ctl.number = true;
      if (form.operation === "分红再投资") {
        // 分红再投资
        form.amount = 0;
        input_ctl.money = false;
      } else if (form.operation === "现金红利") {
        // 现金分红
        form.number = 0;
        input_ctl.number = false;
      }
    };
    const postData = () => {
      if (
        (form.operation === "申购" || form.operation === "赎回") &&
        (form.money === 0 || form.number === 0)
      ) {
        proxy.$message.error("申购赎回操作，数字不能为0");
        return;
      }
      form.post_date = timestamp2date(form.post_date);
      tradeFund(form)
        .then(response => {
          dlgChange(true);
          proxy.$message.success(response.message);
        })
        .catch(error => {
          proxy.$message.error(error);
          dlgChange(false);
        });
    };
    return {
      showDlg,
      form,
      input_ctl,
      postData,
      changeInput,
      dlgChange
    };
  }
};
</script>

<style scoped></style>
